<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<meta charset="UTF-8">
		<title>-webkit-mask-size | CtripUED Webkit CSS Library </title>
		
		<script type="text/javascript" src="base.js"></script>
	
<link rel="stylesheet" type="text/css" href="mask-size.css" media="all">
</head>
<body>
		<div class="head">
			<div class="wrap">
				<a href="http://ued.ctrip.com/blog/wp-content/webkitcss/index.html" class="logo">CtripUED webkit CSS library</a>
				<div class="nav">
					<ul>
						<li><a href="http://ued.ctrip.com/blog/wp-content/webkitcss/index.html">首页</a></li>
						<li><a href="http://ued.ctrip.com/blog/wp-content/webkitcss/aboutus.html#about">关于我们</a></li>
				<li><a href="http://ued.ctrip.com/blog/wp-content/webkitcss/aboutus.html#about_box">意见反馈</a></li>
						<li><a href="http://ued.ctrip.com/">CtripUED 博客</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="wrap">
			<div class="side">
				<div class="filter_box">
					<div class="field" id="catalogFilter">
						<input id="key" placeholder="属性搜索..." type="search">
					</div>
				</div>
				<div class="categorys"></div>
			</div>
			<div class="main" id="main">
				<div class="position" id="position">
					您的位置: <a href="http://ued.ctrip.com/blog/wp-content/webkitcss/index.html">首页</a> &gt; -webkit-mask-size
				</div>
				<!-- /position -->
				<div class="prop_intro">
					<div class="tit">
						<h1>-webkit-mask-size 属性</h1>
					</div>
					<div class="prop_detail">
						定义遮罩层的大小。
					</div>
					<!-- /prop_detail -->
					<div class="prop_comp">
						<p>
						<b>有-webkit-前缀:</b>
						<i class="ico_browser ico_browser_chr"><small>?</small></i>
						<i class="ico_browser ico_browser_saf"><small>?</small></i>
						<i class="ico_browser ico_browser_and"><small>?</small></i>
						<i class="ico_browser ico_browser_ios"><small>？</small></i>
						</p>
						<p>
						<b>无-webkit-前缀:</b>
						<i class="ico_browser ico_browser_chr"><small>？</small></i>
						<i class="ico_browser ico_browser_saf"><small>？</small></i>
						<i class="ico_browser ico_browser_and"><small>?</small></i>
						<i class="ico_browser ico_browser_ios"><small>?</small></i>
						</p>
						<p>?: 表示版本号未知，但该属性可用。</p>
					</div>
					<!-- /prop_comp -->
					<!-- Baidu Button BEGIN -->
					<!-- Baidu Button BEGIN -->

				</div>
				<!-- /prop_intro -->
				<div class="mod prop_gramm">
					<h2 class="mod_tit">语法</h2>
					<p class="mod_con">
					<strong>-webkit-mask-size:</strong> auto | contain | cover | length | percentage
					</p>
				</div>
				<!-- /prop_gramm -->
				<div class="mod prop_value">
					<h2 class="mod_tit">取值</h2>
					<div class="mod_con">
						<table>
							<tbody><tr>
								<th>auto</th>
								<td>继承遮罩图的宽度和高度</td>
							</tr>
							<tr>
								<th>contain</th>
								<td>放大图像到最大的尺寸，同时保持原有的图像纵横比，使得宽高完全地适应背景位置区域</td>
							</tr>
							<tr>
								<th>cover</th>
								<td>缩放图像到最小的尺寸，同时保持原有的图像纵横比，使得宽高完全地覆盖背景位置区域</td>
							</tr>
							<tr>
								<th>length</th>
								<td>浮点数，后跟绝对单位符(cm, mm, in, pt, pc)或者相对单位符 (em, ex, or px)</td>
							</tr>
							<tr>
								<th>percentage</th>
								<td>整数，后跟百分号，百分比的值和背景位置区域有关系。</td>
							</tr>

						</tbody></table>
					</div>
				</div>
				<!-- /prop_value -->
				<div class="mod prop_demo">
					<h2 class="mod_tit">示例</h2>
					<div class="mod_con">
						<iframe id="iframedemo" style="border: 1px solid rgb(204, 204, 204);" src="mask-size_1.html" width="100%" frameborder="0" height="400"></iframe>
						<div class="btns">
							<a href="http://ued.ctrip.com/blog/wp-content/webkitcss/demo/mask-size.html" target="_top" class="btn_primary">演示</a>
						</div>
					</div>
				</div>
				<!-- /prop_demo -->
			</div>
			<!-- /main -->
		</div>
		<!-- /wrap -->
	
</body>
</html>
